<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/xiecheng/xiecheng.css">
</head>

<body>
    <div class="box">
        <!-- 头部搜索框 -->
        <header>
            <div class="seach">
                <input type="text" placeholder="搜索:目的地/酒店/经典/航班号">
                <div class="fdj"></div>
            </div>
            <div class="my">
                <div class="myp"></div>
                <span>我 的</span>
            </div>
        </header>
        <!-- 轮播图 -->
        <div class="banner">
            <div class="imgBox">
                <img src="./xiecheng-material/images/banner05.jpg" alt="">
                <img src="./xiecheng-material/images/banner01.jpg" alt="">
                <img src="./xiecheng-material/images/banner02.jpg" alt="">
                <img src="./xiecheng-material/images/banner03.jpg" alt="">
                <img src="./xiecheng-material/images/banner04.jpg" alt="">
                <img src="./xiecheng-material/images/banner05.jpg" alt="">
                <img src="./xiecheng-material/images/banner01.jpg" alt="">
            </div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 中部功能列表 -->
        <div class="func">
            <div class="funcTop">
                <ul>
                    <li>
                        <div class="funItem"></div>
                        <span>攻略·经典</span>
                    </li>
                    <li>
                        <div class="funItem"></div>
                        <span>门票·玩乐</span>
                    </li>
                    <li>
                        <div class="funItem"></div>
                        <span>美食林</span>
                    </li>
                    <li>
                        <div class="funItem"></div>
                        <span>周边游</span>
                    </li>
                    <li>
                        <div class="funItem"></div>
                        <span>一日游</span>
                    </li>
                </ul>
            </div>

            <div class="funcMid">
                <div class="funcMidTop">
                    <li>酒店</li>
                    <li>民宿·客栈</li>
                    <li>火车票</li>
                    <li>机票</li>
                </div>
                <div class="funcMidMid">
                    <li>机票</li>
                    <li>火车票</li>
                    <li>汽车·船票</li>
                    <li>专车·租车</li>
                </div>
                <div class="funcMidBot">
                    <li>旅游</li>
                    <li>高铁游</li>
                    <li>邮轮游</li>
                    <li>定制游</li>
                </div>
            </div>

            <div class="funcBot">
                <li>
                    <div class="funItem"></div>
                    <span>自由行</span>
                </li>
                <li>
                    <div class="funItem"></div>
                    <span>WiFi电话卡</span>
                </li>
                <li>
                    <div class="funItem"></div>
                    <span>保险·签证</span>
                </li>
                <li>
                    <div class="funItem"></div>
                    <span>换钞·购物</span>
                </li>
                <li>
                    <div class="funItem"></div>
                    <span>当地向导</span>
                </li>
                <li>
                    <div class="funItem"></div>
                    <span>特价机票</span>
                </li>
                <li>
                    <div class="funItem"></div>
                    <span>礼品卡</span>
                </li>
                <li>
                    <div class="funItem"></div>
                    <span>申卡·借钱</span>
                </li>
                <li>
                    <div class="funItem"></div>
                    <span>旅拍NEW</span>
                </li>
                <li>
                    <div class="funItem"></div>
                    <span>更多</span>
                </li>
            </div>
        </div>
        <!-- 特卖会 -->
        <div class="tmh">
            <div class="tmhTitle">
                <div class="tmhTitleImg"></div>
            </div>
            <div class="tmhItem">
                <div class="tmhItemLeft">
                    <img src="./xiecheng-material/images/pic-tmh-01.jpg" alt="">
                    <div class="tmhItemLeftText">
                        <h1>三亚5日自由行(5钻)·节后错峰款【高星度假型酒店合辑·4晚连住】预订赠出行礼遇·网红酒店|唯美海滩|亲子宅玩|海鲜盛宴|惬意泳池|热剧取景地·暖秋当红旅行地 累计超6万人真实出行！
                        </h1>
                        <span>￥1540起</span>
                    </div>
                </div>
                <div class="tmhItemRight">
                    <div class="tmhItemRightTop">
                        <h1>千款特价</h1>
                        <h3>走过路过不要错过</h3>
                        <img src="./xiecheng-material/images/pic-tmh-02.png" alt="">
                    </div>

                    <div class="tmhItemRightBot">
                        <div class="botLeft">
                            <h1>海外精选</h1>
                            <h3>限时抢购</h3>
                            <img src="./xiecheng-material/images/pic-tmh-03.png" alt="">
                        </div>
                        <div class="botRight">
                            <h1>周边玩乐</h1>
                            <h3>欢乐度周末</h3>
                            <img src="./xiecheng-material/images/pic-tmh-04.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 热门活动 -->
        <div class="remen">
            <div class="remenTitle">
                <div class="remenTitleImg"></div>
            </div>
            <div class="remenList">
                <div class="remenItem">
                    <img src="./xiecheng-material/images/huodong01.png" alt="">
                </div>
                <div class="remenItem">
                    <img src="./xiecheng-material/images/huodong02.png" alt="">
                </div>
                <div class="remenItem">
                    <img src="./xiecheng-material/images/huodong03.jpg" alt="">
                </div>
                <div class="remenItem">
                    <img src="./xiecheng-material/images/huodong04.jpg" alt="">
                </div>
                <div class="remenItem">
                    <img src="./xiecheng-material/images/huodong05.jpg" alt="">
                </div>
                <div class="remenItem">
                    <img src="./xiecheng-material/images/huodong06.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- 联系我们 -->
        <div class="contact">
            <div class="container">
                <div class="conItem">
                    <img src="./xiecheng-material/images/电话.png" alt="">
                    <h3>电话预定</h3>
                </div>
                <div class="conItem">
                    <img src="./xiecheng-material/images/下载.png" alt="">
                    <h3>下载客户端</h3>
                </div>
                <div class="conItem">
                    <img src="./xiecheng-material/images/用户.png" alt="">
                    <h3>我的</h3>
                </div>
            </div>
        </div>
        <!-- 页尾 -->
        <footer>
            <div class="up">
                <span>网站地图｜</span>
                <span> <img src="./xiecheng-material/images/网络.png"> Language</span>
                <span>｜电脑版</span>
            </div>
            <div class="down">
                <span>©2019粤嵌H5前端开发｜粤ICP备XXXXXXXX号-XXXXXX</span>
            </div>
        </footer>
    </div>


    <script src="../jQuery/jquery-3.6.0.min.js"></script>
    <script src="./js/xiecheng/xiecheng.js"></script>
</body>

</html>